<template>
  <div class="footer">
      <div v-if=" nowRouterName == '404page' || nowRouterName == 'city' || nowRouterName == 'login' "></div>
      <ul v-else>
       <li><router-link to="/movies"><span class="iconfont icon-dianying"></span>电影/影院</router-link></li>
        <li><router-link to="/vedio"><span class="iconfont icon-dianshiju
"></span>视频</router-link></li>
        <li><router-link to="/minivedio"><span class="iconfont icon-shipin 
"></span>小视频</router-link></li>
        <li><router-link to="/show"><span class="iconfont icon-menpiao"></span>演出</router-link></li>
        <li><router-link to="/mine"><span class="iconfont icon-wode"></span>我的</router-link></li>
      </ul>
  </div>
</template>

<script>
export default {
    name: 'MyFooter',
    data(){
      return {
        nowRouterName : ""
      }
    },
    // 利用监听，获取路由的变化，用mounted只能执行一次
    watch:{
      $route(){
        console.log(this.$route);
        this.nowRouterName = this.$route.name;
        console.log(this.nowRouterName);
      }
    }
}
</script>

<style lang="less" scoped>
.footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
        height: 1.28rem;
        // line-height: 1.6rem;
        li{
            font-size: 12px;
            width: 60px;
            height: 100%;
            // line-height: 100%;
            // background-color: red;
            a{
              text-decoration: none;
              font-size: .32rem;
              &.router-link-exact-active {
                color: rgb(229, 72, 71);
              }
              // color:rgb(240, 61, 55);
              span{
                display:block;
                margin-bottom: .1067rem;
                font-size: .64rem;
              }
            }
        }
    }
  }
</style>